<template>
  <div>
    <!-- 顶部栏 -->
    <van-nav-bar :title="title" style="background:#eb4450;color:white;"></van-nav-bar>
    <!-- 中心主体部分 -->
    <router-view />
    <!-- 底部栏 -->
    <van-tabbar v-model="selected" safe-area-inset-bottom route>
      <van-tabbar-item name="首页" replace to="/home">
        <img slot="icon" src="../../images/homeed.png" />
        首页
      </van-tabbar-item>
      <van-tabbar-item name="会员" replace to="/vip">
        <img slot="icon" src="../../images/categoryed.png" />
        会员
      </van-tabbar-item>
      <van-tabbar-item name="购物车" replace to="/car">
        <img slot="icon" src="../../images/cheed.png" />
        购物车
      </van-tabbar-item>
      <van-tabbar-item name="我的" replace to="/my">
        <img slot="icon" src="../../images/Myed.png" />
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selected: '',
      title: ''
    }
  },
  methods: {

  },
  watch: {
    selected: function (newV, oldV) {
      this.title = newV
      console.log(newV)
    }
  },
  created () {
    this.selected = '首页'
  }
}
</script>

<style lang="less" scope>
.van-tabbar {
  // margin-top: 100px;
}
</style>
